<template name="hotSale">
	<view class="hotSaleBox" v-if="goodList.length>0">
		<view class="titleBox">
			<text>热销榜单</text>
			<view class="refrashBtn"  @tap="refresh">
				<text class="iconfont icon-shuaxin" :class="[isXuanzhuan?'ani':'']"></text>
				<text>换一换</text>
			</view>
		</view>
		<view class="googBox">
			<view class="goodItem" v-for="(item,index) in goodList" :key="index" :data-id="item.courseId" @tap="toGoodDetail" data-url="goodDetail">
				<view class="imgBox">
					<image mode="aspectFill" :src="item.img" :style="{'height':imgHeight+'px'}"></image>
				</view>
				<text class="goodTitle">{{item.name}}</text>
				<view class="priceBox">
					<view class="priceInfo">
						<text>￥{{item.price}}</text>
						<text class="yuyue">{{item.sold}}人预约</text>
					</view>
					<image src="../../static/qiang.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Request from "@/sdk/pocky-request/index.js";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		name: 'hotSale', //组件名称
		computed: {
			...mapState({
				locationCity: state => state.map.locationCity,
				selectCity:state=>state.map.selectCity
			})
		},
		// 传递参数
		props: {
			hasFresh:{
				type:Boolean,
				default:false
			},
		},
		// 组件参数
		data() {
			return {
				imgHeight: parseInt((uni.getSystemInfoSync().screenWidth - uni.upx2px(56)) * 0.315),
				goodList: [{
					"id": 7,
					"areaId": 320104,
					"img": "../../static/loding.png",
					"courseId": 65,
					"name": "",
					"price": 1,
					"sold": 0
				}, {
					"id": 2,
					"areaId": 320116,
					"img": "../../static/loding.png",
					"courseId": 63,
					"name": "",
					"price": 1,
					"sold": 0
				}, {
					"id": 9,
					"areaId": 320102,
					"img": "../../static/loding.png",
					"courseId": 62,
					"name": "",
					"price": 1,
					"sold": 0
				}],
				page_no:1,
				hasNext:false,
				isXuanzhuan:false
			}
		},
		watch:{
			selectCity(newVal){
				this.page_no=1;
				this.getData();
			},
			hasFresh(newVal){
				if(!newVal){
					this.page_no=1;
					this.getData()
				}
			}
		},
		// 组件方法
		methods: {
			getData() {
				let areaId = this.selectCity.cityCode;
				Request().request({
					url: '/mall/recom/course.do',
					method: 'post',
					data: {
						channel: 0,
						areaId: areaId,
						page_no:this.page_no,
						page_size:3
					}
				}).then(res => {
					if (res.data.result == 1) {
						this.goodList = res.data.data.items
						this.hasNext=res.data.data.hasNext;
						this.page_no=res.data.data.nextPage
					} 
				})
			},
			refresh(){
				if(this.hasNext){
					this.isXuanzhuan=true;
					this.getData()
					setTimeout(()=>{
						this.isXuanzhuan=false
					},2000)
				}else{
					this.hasNext=false;
					this.page_no=1
					this.isXuanzhuan=true;
					this.getData()
					setTimeout(()=>{
						this.isXuanzhuan=false
					},2000)
				}
				
			},
			toGoodDetail(e){
				let _id=e.currentTarget.dataset.id;
				this.$store.dispatch("apiGetGoodDetailById",{
					id:_id,
					userId:0
				}).then(res=>{
					uni.setStorageSync("toGood",res.data.data)
					this.toPage(e)
				})
				
			}
		},
		created() {

			setTimeout(() => {
				this.getData()
			}, 100)
		}
	}
</script>

<style lang="less" scoped>
	@import "../../common/public.less";

	.hotSaleBox {
		display: flex;
		flex-direction: column;

		.titleBox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 10upx;

			>text {
				font-size: 32rpx;
				color: #333333;
				font-weight: bold;
			}
		}

		.refrashBtn {
			display: flex;
			align-items: center;
			color: #a0a0a0;

			text {
				font-size: 28upx;
				margin-left: 8upx;
			}

			.iconfont {
				font-size: 36upx;
				display: block;
				width: 36upx;
				height: 36upx;
				margin: 0;
				transform: rotate(0deg);
			}
			.ani{
				animation-name:xuanzhuan;
				animation-duration: 1s;
				animation-iteration-count: infinite;
				animation-timing-function: linear;
				animation-delay: 0s;
			}

		}
		
		
		.googBox {
			display: flex;
			align-items: stretch;
			justify-content: space-between;
			padding: 20upx 0;

			.goodItem {
				width: 31.5%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				box-shadow: 0rpx 4rpx 17rpx 4rpx rgba(201, 202, 208, 0.35);
				border-radius: 14upx;
				background-color: #FFFFFF;
				overflow: hidden;

				.imgBox {
					display: flex;
					border-radius: 14upx;
					overflow: hidden;
				}

				.imgBox image {
					width: 100%;
					display: block;
				}

				.goodTitle {
					font-size: 28upx;
					padding: 0 10upx;
					margin: 10upx 0;
					color: #202932;
					display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						overflow: hidden;
				}

				.priceBox {
					display: flex;
					padding: 6upx 10upx;
					justify-content: space-between;
					align-items: center;

					.priceInfo {
						display: flex;
						flex-direction: column;

						>text {
							font-size: 32upx;
							color: #ff3b2b;
							font-weight: bold;
						}

						.yuyue {
							font-size: 24upx;
							font-weight: normal;
							color: #9e9d9d;
						}
					}

					image {
						flex-shrink: 0;
						width: 50upx;
						height: 50upx;
					}
				}
			}
		}
	}
	
	@keyframes xuanzhuan {
		from{
			transform: rotate(0deg);
		}
		to{
			transform: rotate(360deg);
		}
	}
</style>
